<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	 <base href="<%=basePath%>">
	<title></title>
	<link rel="stylesheet" href="css/bootstrap.css" />
	<link rel="stylesheet" href="js/bootstrap.min.js" />
	<link href="css/bootstrap-responsive.css" rel="stylesheet">
    <link href="js/google-code-prettify/prettify.css" rel="stylesheet">
	<link rel="shortcut icon" href="img/logo.jpg">
	<link type="text/css" rel="Stylesheet" href="css/Main.css" />
	
	<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/google-code-prettify/prettify.js"></script>
    <script type="text/javascript" src="js/bootstrap-transition.js"></script>
    <script type="text/javascript" src="js/bootstrap-alert.js"></script>
    <script type="text/javascript" src="js/bootstrap-modal.js"></script>
    <script type="text/javascript" src="js/bootstrap-dropdown.js"></script>
    <script type="text/javascript" src="js/bootstrap-scrollspy.js"></script>
    <script type="text/javascript" src="js/bootstrap-tab.js"></script>
    <script type="text/javascript" src="js/bootstrap-tooltip.js"></script>
    <script type="text/javascript" src="js/bootstrap-popover.js"></script>
    <script type="text/javascript" src="js/bootstrap-button.js"></script>
    <script type="text/javascript" src="js/bootstrap-collapse.js"></script>
    <script type="text/javascript" src="js/bootstrap-carousel.js"></script>
    <script type="text/javascript" src="js/bootstrap-typeahead.js"></script>
    <script type="text/javascript" src="js/bootstrap-affix.js"></script>
    <script type="text/javascript" src="js/application.js"></script>
    <script type="text/javascript" src="js/Main.js"></script>
	<style type="text/css">
		.navbar{
			background-color:#999999;
		
		}
		body{
			background-color:#F3F1EC;
		
		
		.span6{
			border: 1px solid #DADEE5;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			margin: 0;
			padding: 15px 30px;
			height:auto;
			
		}
		#word{
			background:#F0F5F8;
		    
		}
		
		
	</style>
</head>
<body>
	<div id="container">
		<%@ include file="top.jsp" %>
		
			
		</div>
		<div id="content">
			
			
			<div id="left" class="span3">
				<jsp:include page="lefttop.jsp">
					<jsp:param value="latest" name="tag"/>
				</jsp:include>
				<%@ include file="leftdown.jsp" %>
			
			</div>
			
			<div class="span6" >
				<div id="word" class="span6"style="background:#F0F5F8;border: 1px solid #DADEE5;border-top-left-radius: 5px;border-top-right-radius: 5px;margin: 0;padding: 15px 8px 15px 30px;">
					<h5>最新动态</h5>
					
				</div>
				<div class="list span6" style="margin-left:0px;;float: left;position: relative;background:#fff;font-size: 16px;overflow: hidden;padding: 20px;min-height:500px;">
					<c:forEach items="${infos }" var="info">
						<div class="item span5" style="background:#f2f2f2;margin-bottom:5px;padding:20px;position: relative;" >
							<img src="img/photo.jpg" alt="" style="width:70px;height:70px;margin-top:10px;" />
							<div class="itemcontent" style="position:absolute;left:100px;top:40px;margin:10px;">
								 ${info.message }
							</div>
							<small style="position:absolute;right:60px;bottom:5px;">时间：${info.time}</small>
							<a href="<%=basePath%>latest/del.action?infoid=${info.id}"  class="forward"  style="position:absolute;right:40px;bottom:5px;"><span class="dellogo"><i class="icon-trash"  ></i></span></a>
						
						
						</div>
					</c:forEach>
														
				</div>
																	
			</div>
			<div class="span3" >
				
					<div class="boxcontent" style="background:#f8f8f8;margin-left:30px; padding: 12px 15px;border:1px solid #DADEE5;">
						<p>Your upcoming tasks</p>
						<hr style="margin:5px;"/>
						<div class="link">
							<div class="modal hide fade" id="myModal" >
								 <div class="modal-header">
									<a class="close" data-dismiss="modal">×</a>
								 <h3>添加新任务</h3>
								</div>
									<form action="addtask.action" class="well form-vertical" method="post">
										<input  type="hidden" name="user.username" value="${session.nowUser.username }"/>
										<span style="font-size:18px">add a new task &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
										<input type="text" name="task.cont"/><br>
										<span style="font-size:18px">When's it start? &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
										<input type="text" id="datepickers" name="task.starttime"/><br>
										<span style="font-size:18px">When's it end? &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
										<input type="text" id="dates" name="task.endtime"/><br>
										
										<div class="controls">
											<span style="font-size:18px">Choose a category</span>
											<select id="multiSelect" name="task.type">									
												
												<c:forEach items="${typelist}" var="type">
													<option>${type.keya}</option>
												</c:forEach>								
											</select>
											<a href="tasktype.action">添加新类别</a>
										</div>
										
										<input type="hidden" name="task.userid" value="${session.nowUser.id }"/>
										
										<input type="checkbox" name="task.group"/> Let everyone see this task<br>
										<br>
										<div class="modal-footer">
										<button type="submit" id="btnSubmit" class="btn btn-primary ">Add this task</button>
										<button class="btn " data-toggle="dropup" data-dismiss="modal">Cancel</button>								
										</div>
									</form>
										  
								</div>
							<a href="#myModal" data-toggle="modal" style="color:477A47">Add a new task</a>
						</div>
						<div class="task">							
							<div class="ablock">								
							<div class="date">今天的任务</div>	
							<c:forEach items="${tasklist }" var="task">		
								<c:choose >
									<c:when test="${task.state=='今天的任务' }">																				
									<ul >									
									<li style="margin-bottom:1px ;">
										<input type="checkbox"  style="height:20px;width:20px;"/>
										<span style="background:green">${task.type} </span>&nbsp;&nbsp;${task.cont } 
									</li>										
									</ul>								
									</c:when>
								</c:choose>										
							</c:forEach>	
							</div>
							<div class="date">进行中的任务</div>	
							<c:forEach items="${tasklist }" var="taska">		
								<c:choose >
									<c:when test="${taska.state=='进行中的任务' }">																				
									<ul >									
									<li style="margin-bottom:1px ;">
										<input type="checkbox"  style="height:20px;width:20px;"/>
										<span style="background:green">${taska.type} </span>&nbsp;&nbsp;${taska.cont } 
									</li>										
									</ul>								
									</c:when>
								</c:choose>										
							</c:forEach>
							<div class="date">明天的任务</div>	
							<c:forEach items="${tasklist }" var="taska">		
								<c:choose >
									<c:when test="${taska.state=='明天的任务' }">																				
									<ul >									
									<li style="margin-bottom:1px ;">
										<input type="checkbox"  style="height:20px;width:20px;"/>
										<span style="background:green">${taska.type} </span>&nbsp;&nbsp;${taska.cont } 
									</li>										
									</ul>								
									</c:when>
								</c:choose>										
							</c:forEach>	
								
							<div class="date">即将到来的任务</div>	
							<c:forEach items="${tasklist }" var="taska">		
								<c:choose >
									<c:when test="${taska.state=='即将到来的任务' }">																				
									<ul >									
									<li style="margin-bottom:1px ;">
										<input type="checkbox"  style="height:20px;width:20px;"/>
										<span style="background:green">${taska.type} </span>&nbsp;&nbsp;${taska.cont } 
									</li>										
									</ul>								
									</c:when>
								</c:choose>										
							</c:forEach>	
																											
						</div>
					</div>
				</div>
			</div>						
					
		
		
	<script type="text/javascript">

			$(document).ready(function () {  
				$(".dellogo").live("click",function(){ 
				
					$(".item span5").fadeOut(10000,function(){
						$(".forword").click();
					}); 
					
					
				}); 
				
					
				$(".tip").tooltip();
			});  

		
	
		$(function(){ 
			$('#myModal').modal({
	   		 backdrop:true,
	   		 keyboard:false,
	   		 show:false
			});			
		});	
		$(function(){
			$("#datepickers").datepicker({
				minDate:0			
				});
			$("#dates").datepicker({
				minDate:0				
			});
		});
	</script>




	
</body>
</html>